import Vue from 'vue'
import Vuex from 'vuex'

// install plug-in
Vue.use(Vuex)

// create object
const store = new Vuex.Store({
  // sharing variables
  state: {
    isLogin: false, // user login status
    userType: 0, // 0-user, 1-retailer
    accessToken: '',
    height: document.body.clientHeight,
    width: document.body.clientWidth
  },
  // the only way to update variables in state of vuex through committing mutation which is a synchronized operation
  mutations: {
    // login, logout, register, etc
    userStatus (state, payload) {
      state.isLogin = payload.isLogin
      state.userType = payload.userType
      state.accessToken = payload.accessToken
    },
    updateState (state, payload) { // sessionStorage saves string value
      state.isLogin = payload.isLogin === 'true'
      state.userType = Number(payload.userType)
      state.accessToken = payload.accessToken
    },
    heightWidth (state, payload) {
      state.height = payload.height
      state.width = payload.width
    }
  }
  // // like mutation，but supporting asynchronous operation
  // actions: {
  //   updateStateAsync (context, payload) {
  //     context.commit('updateState', payload)
  //   }
  // },
  // // 基于state中的派生状态，可以理解为组件中的计算属性
  // getters: {
  //
  // }
})

// export store object
export default store
